<template> 
  <div class="app-container">
    <div class="top">
      <el-row type="flex" justify="space-between" align="center">
        <el-col align="center"><span class="txt">车牌号码：{{carNo}}</span> </el-col>
        <el-col align="center"><span class="txt">车主姓名：{{form.realName}}</span></el-col>
        <el-col align="center">
          <el-button v-if="!isChanging && form.synTag == 2" type="warning" @click="changeInfo(0)" round>修改资料</el-button>
          <el-button v-if="isChanging && form.synTag == 2" type="warning"  @click="changeInfo(1)" round>保存资料</el-button>
        </el-col>
        <el-col style="text-align: center"><el-button type="text" @click="backList" icon="el-icon-back">返回列表</el-button></el-col>
      </el-row>
    </div>
    <div class="stoneDiv"></div>
    <el-form :inline="true"  ref="form" :model="form" label-width="130px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <i class="el-icon-user-solid"></i>
          <span>用户信息</span>
        </div>
        <div class="left item-wrapper">
            <el-form-item label="订单编号">
              <el-input v-model="form.orderId" placeholder="请填写订单编号" :disabled="!isChanging"></el-input>
            </el-form-item>
            <el-form-item label="会员姓名">
              <el-input v-model="form.realName"  placeholder="请填写会员姓名" :disabled="!isChanging"></el-input>
            </el-form-item>
            <!-- <el-form-item label="用户状态">
              <el-select v-model="form.userState" placeholder="请选择">
                <el-option label="正常" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
                <el-option label="黑名单" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户来源">
              <el-select v-model="form.userform" placeholder="请选择">
                <el-option label="平台本身" value="0"></el-option>
                <el-option label="客户引流" value="1"></el-option>
                <el-option label="商户推广" value="2"></el-option>
                <el-option label="用户推广" value="3"></el-option>
              </el-select>
            </el-form-item>-->
            <el-form-item label="添加时间">
              <el-date-picker
                :disabled="!isChanging"
                style="width: 205px"
                class="data-pick-style"
                v-model="form.createTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="form.mobilePhone" type="number" maxlength="11"  placeholder="请填写手机号码" :disabled="!isChanging"></el-input>
            </el-form-item>
            <el-form-item label="用户身份证号">
              <el-input v-model="form.idNumber" placeholder="请填写身份证号" :disabled="!isChanging"></el-input>
            </el-form-item>
            <el-form-item label="邮寄地址收货人">
              <el-input v-model="form.receiverName" placeholder="请填写邮寄地址收货人"  :disabled="!isChanging"></el-input>
            </el-form-item>
            <el-form-item label="邮寄收货人手机号">
              <el-input v-model="form.receiverMobilePhone" placeholder="请填写邮寄收货手机号"  :disabled="!isChanging"></el-input>
            </el-form-item>
            <el-form-item label="会员地址">
              <el-input v-model="form.idCardAddress"   placeholder="请填写会员地址" :disabled="!isChanging"></el-input>
            </el-form-item>

            <el-form-item label="邮寄省份">
              <el-select v-model="form.receiverProvince" @change="selectProvinceHandle" :disabled="!isChanging" placeholder="请选择省份">
                <el-option v-for="item in provincesOptions"
                           :key="item.provinceid"
                           :label="item.province"
                           :value="item.province">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="邮寄城市">
              <el-select v-model="form.receiverCity" :disabled="!isChanging" @change="selectCityHandle" placeholder="请选择城市">
                <el-option v-for="item in cityOptions"
                           :key="item.cityid"
                           :label="item.city"
                           :value="item.city">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="邮寄区域">
              <el-select v-model="form.receiverCounty" :disabled="!isChanging" placeholder="请选择地区">
                <el-option v-for="item in areasOptions"
                           :key="item.areaid"
                           :label="item.area"
                           :value="item.area">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="邮寄详细地址">
              <el-input v-model="form.receiverAddress"   placeholder="请填写邮寄详细地址" :disabled="!isChanging"></el-input>
            </el-form-item>
        </div>
        <div class="right">
          <el-form-item label-width="100" class="img-wrapper" label="身份证正面">
            <el-image
              :src="form.idCardZUrl"
              :lazy="true"
              fit="contain" :preview-src-list="[form.idCardZUrl]"></el-image>
          </el-form-item>
          <el-form-item label-width="100"  class="img-wrapper" label="身份证反面">
            <el-image
              :lazy="true"
              :src="form.idCardFUrl"
              fit="contain" :preview-src-list="[form.idCardFUrl]"></el-image>
          </el-form-item>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <i class="el-icon-postcard"></i>
          <span>车辆信息</span>
        </div>
        <div class="left item-wrapper">
          <el-form-item label="车辆所属人">
            <el-input v-model="form.owner" placeholder="请填写车辆所属人" :disabled="!isChanging"></el-input>
          </el-form-item>
          <el-form-item label="车辆类型">
            <el-input v-model="form.vehicleType" placeholder="请填写车辆所属人" :disabled="!isChanging"></el-input>
          </el-form-item>
          <el-form-item label="车辆品牌型号">
            <el-input v-model="form.model" placeholder="请填写车辆品牌型号" :disabled="!isChanging"></el-input>
          </el-form-item>
          <el-form-item label="车牌号码">
            <el-input v-model="form.numberPlates" placeholder="请填写车牌号码" :disabled="!isChanging"></el-input>
          </el-form-item>
          <el-form-item label="车辆识别代号">
            <el-input v-model="form.vin" placeholder="请填写车辆识别代号"  :disabled="!isChanging"></el-input>
          </el-form-item>
          <el-form-item label="外廓尺寸">
            <el-input v-model="form.size" placeholder="请填写外廓尺寸" :disabled="!isChanging"></el-input>
          </el-form-item>
          <el-form-item label="档案编号">
            <el-input v-model="form.fileNumber" placeholder="请填写档案编号" :disabled="!isChanging"></el-input>
          </el-form-item>
          <el-form-item label="车辆发动机编号">
            <el-input v-model="form.engineNo" placeholder="请填写发动机编号" :disabled="!isChanging"></el-input>
          </el-form-item>
          <el-form-item label="核定载人数">
            <el-input v-model="form.personsCapacity" placeholder="请填写核定载人数" :disabled="!isChanging"></el-input>
          </el-form-item>
          <el-form-item label="总质量">
            <el-input v-model="form.loadQuality" placeholder="请填写总质量" :disabled="!isChanging"></el-input>
          </el-form-item>
          <el-form-item label="整备质量">
            <el-input v-model="form.curbWeight" placeholder="请填写整备质量" :disabled="!isChanging"></el-input>
          </el-form-item>
          <el-form-item label="车辆地址">
            <el-input v-model="form.carAddress" placeholder="请填写车辆地址" :disabled="!isChanging"></el-input>
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item class="img-wrapper" label-width="110" label="行驶证主页地址">
            <el-image
              :src="form.drivPermitZUrl"
              :lazy="true"
              fit="contain" :preview-src-list="[form.drivPermitZUrl]"></el-image>
          </el-form-item>
          <el-form-item class="img-wrapper" label-width="110" label="行驶证副页地址">
            <el-image
              :lazy="true"
              :src="form.drivPermitFUrl"
              fit="contain" :preview-src-list="[form.drivPermitFUrl]"></el-image>
          </el-form-item>
          <el-form-item class="img-wrapper" label-width="110" v-if="form.carHeadUrl" label="车头照片">
            <el-image
              :lazy="true"
              :src="form.carHeadUrl"
              fit="contain" :preview-src-list="[form.carHeadUrl]"></el-image>
          </el-form-item>
        </div>
      </el-card>
    </el-form>
    <el-form  ref="form" :model="form1" label-width="120px">
      <el-card class="box-card">
      <div slot="header" class="clearfix">
        <i class="el-icon-document-checked"></i>
        <span>审核信息</span>
      </div>
      <div class="item-wrapper">
        <el-row>
          <el-col :span="6">
            <el-form-item label="审核人">
              <el-input v-model="form1.auditor" disabled placeholder="请填写审核人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核时间">
              <el-date-picker
                  disabled
                  style="width: 205px"
                  class="data-pick-style"
                  v-model="form1.examinTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核结果">
              <el-select v-model="form1.result" placeholder="请选择">
                <el-option label="通过"   value="1"></el-option>
                <el-option label="不通过" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="不通过原因">
                <el-input type="textarea" :autosize="{ minRows: 4}" placeholder="请填写不通过原因" v-model="form1.nopassReason"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" align="center">
            <el-button type="primary" class="check_btn" @click="onSubmit">提交</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    </el-form>
  </div>
</template>
<script>
  import { mapGetters, mapMutations  } from 'vuex'
  import { Message } from 'element-ui'
  import requestApi from '@/api/index.js';

  export default {
    name: "orderList",
    data() {
      return {
        carNo: '',
        orderId: '',
        provincesOptions: [],
        cityOptions: [],
        areasOptions: [],
        isChanging: false,
        form: {
          orderId: '',
          realName: '',
          createTime: '',// 添加时间
          mobilePhone: '',
          cardType: '',
          idNumber: '',// 身份证号
          receiverName: '',//
          receiverMobilePhone: '',
          receiverProvince: '',
          receiverCity: '',
          receiverCounty: '',
          receiverAddress: '',
          idCardAddress: '',
          idCardZUrl: '',
          idCardFUrl: '',
          // 车辆信息
          owner: '',
          vehicleType: '',
          model: '',
          numberPlates: '', // 车牌号码(行驶证)
          vin: '',// 车辆识别代号(行驶证)
          size: '', // 外廓尺寸(行驶证副页)
          fileNumber: '', // 档案编号
          engineNo: '', //车辆发动机编号
          personsCapacity: '', //核定载人数(行驶证副页)
          loadQuality: '', //核定载质量(行驶证副页)
          curbWeight: '', //整备质量，
          carAddress: '', // 车辆地址
          drivPermitZUrl: '',
          drivPermitFUrl: '',
          carHeadUrl: '',
        },
        form1: {
          // 审核信息
          auditor: '',
          examinTime: '',
          result: '',
          nopassReason: '',
        },
      }
    },
    beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      if (to.name == "orderDetail") {
        to.meta.keepAlive = false;
        to.meta.isBack = true;
      }
      next();
    },
    created() {
      this.orderId = this.$route.query.orderId;
      this.carNo = this.$route.query.carNo;
      this.getDetail();
    },
    methods: {
      getDetail() {
        requestApi.etcInfoData({orderId: this.orderId}).then((res) => {
          if (res.code == 0) {
            const resInfoObj = res.result.etcInfoData;
            this.form = Object.assign(this.form, resInfoObj);
            this.form1 = Object.assign(this.form1, res.result.examin);
            this.queryProvinces();
          } else {
            Message({
              message: res.message,
              type: 'error',
              duration: 3 * 1000
            })
          }
        }).catch(() => {
          Message({
            message:'服务器异常',
            type: 'error',
            duration: 3 * 1000
          })
        })
      },
      updateEtcInfoData() {
        requestApi.updateEtcInfoData(this.form).then((res) => {
          if (res.code == 0) {
            Message({
              message: '操作成功',
              type: 'success',
              duration: 3 * 1000
            })
          } else {
            Message({
              message: res.message,
              type: 'error',
              duration: 3 * 1000
            })
          }
        }).catch(() => {
          Message({
            message:'服务器异常',
            type: 'error',
            duration: 3 * 1000
          })
        })
      },
      backList() {
        this.$router.back();//返回上一层
      },
      // 审核提交
      onSubmit() {
        const params = Object.assign({}, this.form1, {orderId: this.orderId})
        requestApi.examinEtcInfo(params).then((res) => {
          if (res.code == 0) {
            Message({
              message: '操作成功',
              type: 'success',
              duration: 3 * 1000
            })
          } else {
            Message({
              message: res.message,
              type: 'error',
              duration: 3 * 1000
            })
          }
        }).catch(() => {
          Message({
            message:'服务器异常',
            type: 'error',
            duration: 3 * 1000
          })
        })
      },
      //
      changeInfo(type) {
        if (type == 1) {
          // 读取接口
          this.updateEtcInfoData();
        }
        this.isChanging = !this.isChanging
      },
      selectProvinceHandle(e) {
        const provinceid = this.filterData(this.provincesOptions, 'province', e);
        this.queryCities(provinceid, true);
      },
      selectCityHandle(e) {
        const cityid = this.filterData(this.cityOptions, 'city', e);
        this.queryAreas(cityid, true);
      },
      // filter data
      filterData(arr, type, value) {
        let obj = {}
        obj = arr.find((item) => {
          return item[type] == value;
        })
        return obj[type+'id'];
      },
      // 获取省份
      queryProvinces() {
        requestApi.queryProvincesNew().then((res) => {
          this.provincesOptions = res;
          if (this.form.receiverProvince) {
            const provinceid = this.filterData(this.provincesOptions, 'province', this.form.receiverProvince);
            this.queryCities(provinceid, false);
          }
        })
      },
      // 根据省份获取城市
      queryCities(provinceid, isRefresh) {
        requestApi.queryCitiesNew({provinceid}).then((res) => {
          if (isRefresh) {
            this.form.receiverCity = '';
            this.form.receiverCounty = '';
          }
          this.cityOptions = res;
          if (this.form.receiverCity) {
            const cityid = this.filterData(this.cityOptions, 'city', this.form.receiverCity);
            this.queryAreas(cityid, false);
          }
        })
      },
      // 根据城市获取区域
      queryAreas(cityid, isRefresh) {
        requestApi.queryAreasNew({cityid}).then((res) => {
          if (isRefresh) {
            this.form.receiverCounty = '';
          }
          this.areasOptions = res;
        })
      },
    },
  }
</script>
<style scoped>
  .el-card__body {
    padding: 10px !important;
  }
  .top {
    margin-bottom: 0;
    position: fixed!important;
    top: 50px;
    width: 96%;
    background-color: rgb(245, 245, 245);
    box-sizing: border-box;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    z-index: 10;
    padding: 10px 0;
  }
  .top .txt {
    display: flex;
    height: 40px;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
  }
  .el-button--text {
    color: #333;
    font-weight: bold;
    font-size: 18px;
  }
  .stoneDiv {
    height: 40px;
  }
  .box-card {
    margin-top: 15px;
  }
  .item-wrapper {

  }
  .left {
    display: table-cell;
    vertical-align: top;
    width: 55%;
  }
  .right {
    display: table-cell;
    vertical-align: top;
    text-align:left;
  }
  .img-wrapper {
    width: 100%;
  }
  .el-input {
    max-width: 210px;
  }
  .el-select {
    max-width: 207px !important;
  }
  .check_btn {
    margin-top: 30px;
  }
  .el-image {
    width: 400px;
    height: 250px;
  }
</style>


